<template>
  <div class="son2">
    <h2>Son2子组件- {{ title }}</h2>
    从vuex中获取值：<label> {{ count }}</label>
    <br>
    <!-- <button @click="reductCount(1)">值 - 1</button>
    <button @click="reductCount(5)">值 - 5</button>
    <button @click="reduce(10)">值 - 10</button> -->
    <button @click="reductCount(20)">值 - 20 通过mutation辅助函数完成</button>
    <button @click="changeTitles('改成这个')">通过mutation辅助函数修改标题</button>
  </div>
</template>

<script>
// 使用辅助函数帮助导入仓库中的状态（数据），原理是封装成计算属性，之后通过展开运算符的方式进行运算
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['count', 'title'])
  },
  methods: {
    // 使用辅助函数mapMutations 将mutations中的方法提取出来，映射到methods中， 可以直接 通过 this.方法名 使用
    ...mapMutations(['reductCount', 'changeTitles'])
    // reduce (n) {
    //   this.reductCount(n)
    // }
  }
}
</script>

<style>

</style>
